<template>
    <div class="location">
        <input type="text" v-model="ipt" >
        <ul>
            <li @click="goHome(item)" v-for="item in tips" :key="item.id">
                {{ item.name }}
            </li>
        </ul>
        <div id="container"></div>
    </div>
</template>

<script>
import {
    mapMutations,
    mapState
} from "vuex"
export default {
    data() {
        return {
            text:"<p></p>",
            ipt:"",
            location:"",
            tips:[]
        };
    },
    watch: {
        ipt(){
            var _this = this;
            AMap.plugin('AMap.AutoComplete', function(){
                var autoOptions = {
                    //city 限定城市，默认全国
                    city: _this.location
                };
                // 实例化AutoComplete
                var autoComplete= new AMap.AutoComplete(autoOptions);
                // 根据关键字进行搜索
                autoComplete.search(_this.ipt, function(status, result) {
                    // 搜索成功时，result即是对应的匹配数据
                    console.log(result);
                    _this.tips = result.tips
                })
            })
        }
    },
    computed: {
        ...mapState({
            vuexLocation:"location"
        })
    },
    created() {

    },
    mounted() {
        var _this = this;
        AMap.plugin('AMap.CitySearch', function () {
            var citySearch = new AMap.CitySearch()
            citySearch.getLocalCity(function (status, result) {
                if (status === 'complete' && result.info === 'OK') {
                // 查询成功，result即为当前所在城市信息
                    console.log(result)
                    _this.location = result.city
                }
            })
        })
        var position = [113.598609, 34.747034],title="不凡"
       if(this.vuexLocation.id){ // 如果vuex有数据 使用vuex中的数据
        title=this.vuexLocation.name
        position = [this.vuexLocation.location.lng,this.vuexLocation.location.lat]
        
       }

    //  标记文字内容文档地址  https://lbs.amap.com/demo/jsapi-v2/example/marker/set-marker-text-label
        var map = new AMap.Map('container',{
            zoom:17,//级别
            center: position // 和昌大厦
        });

        var marker = new AMap.Marker({
            position:position //位置// 和昌大厦
        })
        
        marker.setLabel({
            direction:'top-center',
            // offset: new AMap.Pixel(10, 0),  //设置文本标注偏移量
            content: `<div class='info'>${title}</div>`, //设置文本标注内容
        });
        map.add(marker);//添加到地图

        
    },
    methods: {
        goHome(val){
            this.uptLocation(val);
            this.$router.push("/home")
        },
        ...mapMutations(["uptLocation"])
    },
};
</script>

<style>
.location .amap-icon img {
            width: 25px;
            height: 34px;
        }

        .location .amap-marker-label{
            border: 0;
            background-color: transparent;
        }

        .location .info{
            position: relative;
            margin:0;
            top: 0;
            right: 0;
            min-width: 0;
            color: red;
        }
</style>
<style scoped lang="scss">

#container{
    width: 500px;
    height: 500px;
}
</style>
